<template>
  <div class="business-container">
    <!--行内表单-->
    <div class="form-inline-container">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        size="small"
      >
        <el-form-item>
          <el-button type="primary" @click="addClick" icon="el-icon-plus"
            >添加</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!--表格-->
    <div class="table-container" v-loading="loading">
      <el-alert title="警告：非开发人员不要随意修改本页面数据!" type="warning"> </el-alert>
      <div class="permission-content">
        <el-tree
          :data="tableData"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span class="folder-sort">{{node.id}}</span>
              <span class="folder-name">{{ node.label }}</span>
              <span class="folder-permission">[admin]</span>
              <span>
                <el-link type="primary" @click="addClick(data)" href="javascript:void(0);" class="ml10">添加</el-link>
                <el-link type="primary" @click="editClick(data)" href="javascript:void(0);" class="ml10">修改</el-link>
                <el-link type="danger" @click="delClick(data)" href="javascript:void(0);" class="ml10">删除</el-link>
              </span>
            </span>
          </template>
        </el-tree>
      </div>
    </div>

    <!--添加-->
    <Add :visible="addVisible" @close="closeAdd"></Add>
  </div>
</template>

<script>
import Add from "./part/Add.vue";
export default {
  components: {
    //添加
    Add,
  },
  data() {
    const data = [
      {
        id: 1,
        label: "一级 1",
        children: [
          {
            id: 4,
            label: "二级 1-1",
            children: [
              {
                id: 9,
                label: "三级 1-1-1",
              },
              {
                id: 10,
                label: "三级 1-1-2",
              },
            ],
          },
        ],
      },
      {
        id: 2,
        label: "一级 2",
        children: [
          {
            id: 5,
            label: "二级 2-1",
          },
          {
            id: 6,
            label: "二级 2-2",
          },
        ],
      },
      {
        id: 3,
        label: "一级 3",
        children: [
          {
            id: 7,
            label: "二级 3-1",
          },
          {
            id: 8,
            label: "二级 3-2",
          },
        ],
      },
    ];
    return {
      //是否正在加载
      loading: false,
      //表单数据
      formInline: {
        //搜索关键字
        search: "",
      },
      //表格数据
      tableData: JSON.parse(JSON.stringify(data)),
      //是否打开添加
      addVisible: false,
    };
  },
  created() {
    //this.getData();
  },
  methods: {
    /**
     * 获取列表
     */
    getData() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 1000);
      this.tableData = [];
      for (
        let i = this.pageSize * (this.currentPage - 1) + 1;
        i < this.pageSize * this.currentPage + 1;
        i++
      ) {
        let d = new Date();
        let item = {
          id: i,
          created_date:
            d.getFullYear() +
            "-" +
            d.getMonth() +
            "-" +
            d.getDate() +
            " " +
            d.getHours() +
            ":" +
            d.getMinutes() +
            ":" +
            d.getSeconds(),
          update_date: "2021-02-24T06:13:41.308Z",
          business_name: "华为科技",
          telphone:
            "138" + Math.floor(Math.random() * (100000000 - 9999999) + 9999999),
          customer_id: "70ad3280-7667-11eb-860f-fba2e5e96391",
          business_address: "深圳坂田",
          business_describe: "中国大企业",
          user_id: 1,
        };
        this.tableData.push(item);
      }
    },

    /**
     * 添加
     */
    addClick() {
      this.addVisible = true;
    },

    /**
     * 修改
     */
    editClick(e) {
      this.addVisible = true;
    },

    /**
     * 关闭
     */
    closeAdd(e) {
      this.addVisible = false;
    },

    /**
     * 删除
     */
    delClick(e) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang="scss">
.permission-content{
    padding: 20px;
    .folder-sort{
        padding: 0 4px;
        color: #dddddd;
    }
    .folder-permission{
        padding: 0 4px;
        color:#2b9818;
    }
}
</style>